<template>
  <div class="product">
    <!-- 搜索框 -->
    <div class="search">
      <template>
        <el-select
          v-model="searchValue"
          filterable
          clearable
          remote
          reserve-keyword
          @change="searchTextChange"
          :remote-method="remoteMethod"
          placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
          :loading="loading"
        >
          <el-option
            v-for="item in searchList"
            :key="item.sId"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </template>
      <!-- 搜索按钮 -->
      <el-button type="primary" icon="el-icon-search" @click="searchButtonChange" plain></el-button>
      <!-- 添加按钮 -->
      <!-- <el-button type="primary" v-has="'add'" :disabled="disabled">添加项目</el-button> -->
      <el-button type="primary" v-has="'add'" @click="addStu" :disabled="disabled">添加项目</el-button>
    </div>
    <!-- 班级选择 -->
    <div class="select-class">
      <!-- 框框 -->
      <el-form>
        <el-form-item label="选择班级:">
          <el-select
            v-model="classes"
            filterable
            placeholder="请选择"
            @visible-change="classVisible"
            @change="classChange"
          >
            <el-option
              v-loading="selectLoading"
              label="全部"
              value="all"
            ></el-option>
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in classList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 导出excel -->
    <div class="exportExcel">
      <el-button icon="iconfont icon-excel" @click="exportExcel">导出excel数据</el-button>
    </div>
    <!-- 表格 -->
    <div class="stu-table">
      <el-table :data="stuData" v-loading="loading" border style="width: 100%">
        <el-table-column
          prop="headimgurl"
          align="center"
          label="头像"
          width="100"
        >
          <!-- 插槽作用域 -->
          <template v-slot="scope">
            <el-avatar
              shape="square"
              :size="50"
              fit="fill"
              :src="scope.row.headimgurl"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" width="120" label="姓名">
        </el-table-column>
        <el-table-column prop="degree" align="center" label="学历">
        </el-table-column>
        <el-table-column prop="class" align="center" label="班级">
        </el-table-column>
        <el-table-column prop="productUrl" align="center" label="项目">
        </el-table-column>
        <el-table-column prop="cTime" align="center" label="创建时间">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-view"
              @click="showStu(row)"
              v-has="'read'"
              >查看</el-button
            >
            <el-button
              type="primary"
              class="btn"
              icon="el-icon-edit"
              @click="editStu(row)"
              v-has="'edit'"
              >编辑</el-button
            >
            <el-button
              type="danger"
              v-has="'delete'"
              class="btn"
              icon="el-icon-delete"
              @click="deleteStu(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        background
        hide-on-single-page
        :page-size="stuPageSize"   
        :total = "stuTotal"
        @current-change = "changePage"
        @clear = "clear"
        layout="prev, pager, next"
        :current-page.sync="currentPage"
      >
      </el-pagination>
    </div>
    <!-- dialog弹出框 -->
    <el-dialog></el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/users";
import { log } from "qrcode/lib/core/galois-field";
import { mapState, mapActions, mapMutations } from "vuex";
import dialog from "@/components/Dialog/index.vue";
import excel from "qf-export-excel"  // 前端导出excel的方法

export default {
  meta: {
    title: "xyxmgl",
    icon: "iconfont icon-xueyuan",
  },
  data() {
    return {
      // params:{
      //   class:"",
      //   count:5,
      // },
      // stuData:[], // 表格的数据对象
      classes: "", // select 下拉框绑定的班级
      // loading:false,
      classList: [], //班级列表
      disabled: false,
      selectLoading: true,   // 显示下拉框loading加载动画
      searchList: [],  // 键盘弹起的时候获取输入值
      searchValue: "",
      currentPage: 1,
    };
  },
  computed: {
    ...mapState(["stuData", "loading", "dialogFormVisible", "stuPageSize", "stuTotal"]),
  },
  created() {
    this.GET_STULIST(); // 获取学员数据列表
    //   this.getStuList() // 获取学员数据列表
  },
  components: {
    "el-dialog": dialog,
  },
  methods: {
    ...mapActions(["GET_STULIST"]),
    ...mapMutations(["SHOW_DIALOG", "CHANGE_DIALOG_TITLE", "SET_CURRENT_ROW","SET_STU_DATA"]),

    // 分页器，页码发生改变的时候触发的事件
    changePage(page){
      //判断搜索框是否有值,如果有,就展示搜索结果的分页
      if(this.searchValue){
        api.searchStuApi(this.searchValue,"",page)
        .then(res => {
          this.SET_STU_DATA(res.data)
        })
      }else{
        // console.log(page);
        // 页码变更，传给后台，重新获取数据
        this.GET_STULIST({page})
      }
      
    },

    // 键盘弹起的时候获取输入值
    remoteMethod(query){
      // console.log(query);
      this.searchValue = query
      //向后台发起请求
      api.searchStuApi(query,"","")
      .then(res => {
        console.log(res);
        // 数组去重,判断搜索内容是否重复
        let norepeat = []
        for(let i = 0; i <res.data.data.length; i++){
          let flag = true;
          for(let k=0;k<norepeat.length;k++){
            if(norepeat[k].name === res.data.data[i].name){
              flag = false;
              break;  
            }
          }
          if(flag){
            norepeat.push(res.data.data[i])
          }
        }
        // console.log(norepeat);
        this.searchList = res.data.data
      })
    },
    // 获取表格数据
    //   getStuList(params = {page:1,count:10,classes:""}){
    //     // 发送请求获取学员数据
    //     api.getStuListApi()
    //     .then(res => {
    //       console.log(res.data);
    //       this.stuData = res.data.data;
    //       this.loading = false; // 关闭表格加载动画
    //     })
    //   },

    // 查看学员资料
    showStu(row){
      this.SET_CURRENT_ROW(row)
      this.$router.push({path:'/StudentManager/StudentProfill'})
    },
    // 增加学院
    addStu() {
      // 修改dialog标题
      this.CHANGE_DIALOG_TITLE("增加学员信息");
      // 显示dialog
      this.SHOW_DIALOG();
    },

    // 编辑学员
    editStu(row) {
      // 修改dialog标题
      this.CHANGE_DIALOG_TITLE("编辑学员信息");
      // 显示dialog
      this.SHOW_DIALOG();
      // 将当前这行的数据回显到dialog弹出框中
      // 通过vuex修改currentRow的值
      this.SET_CURRENT_ROW(row);
    },
    // 删除学员
    deleteStu(row) {
      // console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 请求数据
          api.delStuApi(row.sId).then((res) => {
            if (res.data.state) {
              // 删除成功
              this.GET_STULIST(); // 更新列表
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              // 删除失败，数据已被别人删除
              this.$message.error("删除失败，数据不存在");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除",
          });
        });
    },
    
    // 选择班级
    classChange(query) {
      // console.log(query);
      // query就是选中的option
      // 1.展开的时候需要展示所有的班级列表
      // 2.选中班级列表的时候，需要更新表格
      // 当query等于 all 的时候，就需要展示所有班级
      if(query === 'all'){
        query = ''   // 将query赋值为空，因为不传值的话，后台就默认返回所有数据
      }
      // 调用封装好的GET_STULIST更新列表，传递班级就可以了
      this.GET_STULIST({classes: query})
    },

    // 班级选择框展开和收起时触发的事件
    classVisible(isVisible){
      // 下拉框一开始展示内容的时候，出现loading
      this.selectLoading = true
      // console.log(isVisible);
      // 展开时需要调用的数据
      // 调用获取列表的方法
      if(isVisible){
        // 出现下拉框
        // 发送请求，获取班级列表
        api.getClassesApi()
        .then(res => {
          // console.log(res);
          this.classList = res.data.data
          // 数据出现后，loading隐藏
          this.selectLoading = false;
        })
      }
    },

    // 搜索框中值发生变化的事件
    searchTextChange(searchText){
      // console.log(searchText);
      // 请求数据，更新列表
      api.searchStuApi(searchText,"","")
      .then(res => {
        // 让分页器数值初始化1，恢复到第一页
        this.currentPage = 1
        // console.log(res);
        // 触发的vuex中更新表格数据的方法
        this.SET_STU_DATA(res.data)
      })
    },

    // 点击搜索按钮触发的事件
    searchButtonChange(){
      console.log(this.searchValue);
      api.searchStuApi(this.searchValue,"","")
      .then(res => {
        console.log(res);
        this.SET_STU_DATA(res.data)
      })
    },

    // 清空输入框内容的时候，表格中应该显示所有内容
    clear(){
      // 让分页器数值初始化1，恢复到第一页
      this.currentPage = 1
    },

    // 导出Excel
    exportExcel(){
      let titleList = [
        {
            title: '头像地址',
            key: 'headimgurl'
        }, 
        {
            title: '名字',
            key: 'name'
        }, 
        {
            title: '学历',
            key: 'degree'
        },
        {
            title: '班级',
            key: 'class'
        },
        {
            title: '项目地址',
            key: 'productUrl'
        },
        {
            title: '创建时间',
            key: 'cTime'
        },
      ]
      excel(titleList,this.stuData,"后台管理系统数据")
    }


  },
  
  //自定义局部鉴权指令
  // directives: {
  //   has: {
  //     inserted(el, binding) {
  //       console.log(el);
  //       console.log(binding);
  //     },
  //   },
  // },

};
</script>

<style scoped lang="less">
.search {
  line-height: 60px;
  text-align: left;
  margin: 20px 0;
  /deep/ .el-input__inner {
    width: 300px;
  }
}

.select-class {
  line-height: 40px;
  text-align: left;
  margin-bottom: 20px;
}
.stu-table .btn {
  width: 65px;
  height: 25px;
  padding: 0;
}
.pagination {
  margin-top: 20px;
}
/deep/ .exportExcel i.icon-excel {
  color: green;
  font-size: 20px;
  margin-right: 3px;
}

.exportExcel .el-button {
  padding: 4px 7px;
  float: right;
}
.exportExcel {
  margin-bottom: 10px;
  overflow: hidden;
}
</style>
